<template>
    <view class="photo-page">
        <view class="photo-page-tabs">
            <scroll-view :scroll-x="true" class="scroll-tabs">
                <view
                    v-for="tab in tabs"
                    :key="tab.key"
                    :class="['tab-item', {'active': activeTab === tab.key}]"
                    @click="switchTab(tab.key)"
                >
                    {{ tab.label }}
                </view>
            </scroll-view>
        </view>
        <view class="section">
            <view v-if="activeTab === '1'" class="features">
                <view class="section-title">{{ $t('productDetail.tabs.productFeature') }}</view>
                <view v-for="(item, index) in photoDetail.features" :key="index" class="features-item">
                    <view class="features-item-title">{{ item.title }}</view>
                    <view class="features-item-desc">{{ item.description }}</view>
                </view>
            </view>
            <view v-if="activeTab === '2'" class="details">
                <view class="section-title">{{ $t('productDetail.tabs.pictureDetails') }}</view>
                <view v-for="(item, index) in photoDetail.details" :key="index" class="details-item">
                    <view v-if="item.type === 'IMAGE'">
                        <image :src="item.image" mode="aspectFill" class="full-width-image" />
                    </view>
                    <view v-if="item.title" class="details-item-title">{{ item.title }}</view>
                    <view v-if="item.description" class="details-item-desc">{{ item.description||'' }}</view>
                </view>
            </view>
           <!-- <view v-if="activeTab === '3'" class="validity">
                <view class="validity-title">
                    <view class="section-title">{{ $t('productDetail.tabs.validity') }}</view>
                </view>
                <view v-for="(item, index) in photoDetail.validity" :key="index" class="validity-item">
                    <text class="with-dot">{{ item }}</text>
                </view>
            </view> -->
            <view v-if="activeTab === '4'" class="pricing">
                <view class="pricing-title">
                    <view class="section-title">{{ $t('productDetail.tabs.feeDescription') }}</view>
                </view>
                <view>
                    <view v-if="photoDetail.pricing.included" class="pricing-item">
                        <view class="pricing-item-title">{{ $t('productDetail.photo.included') }}</view>
                        <view v-for="(item, index) in photoDetail.pricing.included" :key="index">
                            <text class="with-dot">{{ item }}</text>
                        </view>
                    </view>
                    <view v-if="photoDetail.pricing.excluded" class="pricing-item">
                        <view class="pricing-item-title">{{ $t('productDetail.photo.excluded') }}</view>
                        <view v-for="(item, index) in photoDetail.pricing.excluded" :key="index">
                            <text class="with-dot">{{ item }}</text>
                        </view>
                    </view>
                </view>
            </view>
          <!--  <view v-if="activeTab === '5'" class="usage">
                <view class="usage-title">
                    <view class="section-title">{{ $t('productDetail.tabs.usageMethod') }}</view>
                </view>
                <view v-for="(item, index) in photoDetail.usage" :key="index" class="usage-item">
                    <text>{{ index + 1}}. {{ item }}</text>
                </view>
            </view> -->
            <view v-if="activeTab === '6'" class="refund">
                <view class="refund-title">
                    <view class="section-title">{{ $t('productDetail.tabs.refundPolicy') }}</view>
                </view>
                <view v-for="(item, index) in photoDetail.refund" :key="index" class="refund-item">
                    <text class="with-dot">{{ item }}</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'PhotoDetail',
    props: {
        photoDetail: {
            type: Object,
            default: () => ({})
        },
    },
    data() {
        return {
            tabs: [
                { label: this.$t('productDetail.tabs.productFeature'), key: '1' },
                { label: this.$t('productDetail.tabs.pictureDetails'), key: '2' },
                // { label: this.$t('productDetail.tabs.validity'), key: '3' },
                { label: this.$t('productDetail.tabs.feeDescription'), key: '4' },
                // { label: this.$t('productDetail.tabs.usageMethod'), key: '5' },
                { label: this.$t('productDetail.tabs.refundPolicy'), key: '6' },
                { label: this.$t('productDetail.tabs.userReviews'), key: '7' },
            ],
            activeTab: '1',
        }
    },
    created() {
        this.switchTab(this.activeTab, false); 
    },
    methods: {
        switchTab(key, flag = true) {
            if (this.activeTab === key && flag) return;
            this.activeTab = key;
            this.activeTab = key;
            let isShowComment = false;
            if (key === '7') isShowComment = true;
            this.$emit('myHtmlShowComment', isShowComment);
        },
    }
}
</script>

<style lang="scss" scoped>
.photo-page {
    position: relative;
    padding-top: 80rpx;
    &-tabs {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background-color: #fff;
        z-index: 100;
        border-bottom: 1rpx solid #eee;
        .scroll-tabs {
            white-space: nowrap;
            padding: 20rpx 0;
        }
        .tab-item {
            display: inline-block;
            padding: 0 30rpx;
            font-size: 28rpx;
            color: #666;
            line-height: 60rpx;
            &.active {
                color: #ff5f5f;
                font-weight: bold;
                border-bottom: 4rpx solid #ff5f5f;
            }
        }
    }
    .section {
        background-color: #fff;
        margin-top: 20rpx;
        padding: 0 32rpx 20rpx;
        &-title {
            font-size: $uni-font-size-lg;
            font-weight: bold;
            line-height: 80rpx;
        }
        .features {
            &-item {
                margin-bottom: 20rpx;
                border: 1px solid #e5e7eb;
                border-radius: 16rpx;
                padding: 24rpx;
                &-title {
                    font-size: $uni-font-size-base;
                    margin-bottom: 16rpx;
                }
                &-desc {
                    font-size: $uni-font-size-sm;
                    color: #666;
                }
            }
        }
        .details {
            &-item {
                margin-bottom: 20rpx;
                .full-width-image {
                    width: 100%;
                    height: 300rpx;
                    object-fit: cover;
                    border-radius: 16rpx;
                }
                &-title {
                    font-size: $uni-font-size-base;
                    margin-bottom: 16rpx;
                }
                &-desc {
                    font-size: $uni-font-size-sm;
                    color: #666;
                }
            }
        }
        .validity,
        .pricing,
        .usage,
        .refund {
            &-title {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }
        }
        .validity {
            &-item {
                font-size: $uni-font-size-base;
            }
        }
        .pricing {
            &-item {
                margin-top: 20rpx;
                &:first-child {
                    margin-top: 0;
                }
                &-title {
                    font-size: $uni-font-size-base;
                    font-weight: 600;
                }
                text {
                    font-size: $uni-font-size-sm;
                }
            }
        }
        .usage {
            &-item {
                font-size: $uni-font-size-base;
            }
        }
        .refund {
            &-item {
                font-size: $uni-font-size-base;
            }
        }
    }
    .with-dot {
        position: relative;
        padding-left: 20rpx;
        &::before {
            content: '';
            position: absolute;
            left: 0;
            top: 16rpx;
            transform: translateY(-50%);
            width: 10rpx;
            height: 10rpx;
            background-color: #ccc;
            border-radius: 50%;
        }
    }
}
</style>